<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/msg.css">
</head>
<body>
    <div class="container">
        <div class="top">用户信息修改</div>
        <div class="group">
         <p>用户名:</p> 
            <div class="input">
                <input type="text" name="username">
            </div> 
        </div>
        <div class="group">
            <p>密码:</p> 
            <div class="input">
                 <input type="text" name="password">
            </div> 
        </div>
        <div class="group">
            <p>邮箱:</p> 
            <div class="input">
                <input type="text" name="email">
            </div> 
        </div>
        <div class="group">
            <p>手机号:</p> 
            <div class="input">
                <input type="text" name="phone">
            </div> 
        </div>
        <div class="sex"">
            <span>性别:</span>
            <input type="radio" name="sex" value="boy">男
            <input type="radio" name="sex" value="girl">女
        </div>
        <div class="hobby">
            <span>爱好:</span>
            <input type="checkbox" name="hobby" id="" value="游戏">游戏
            <input type="checkbox" name="hobby" id="" value="篮球">篮球
            <input type="checkbox" name="hobby" id="" value="唱歌">唱歌
            <input type="checkbox" name="hobby" id="" value="跳舞">跳舞
            <input type="checkbox" name="hobby" id="" value="跑步">跑步
        </div>
        <div class="save">
            <input type="button" onclick="save()" value="save">
        </div>
    </div>
</body>
<script src="/jquery.min.js"></script>
<script>
    var username=$('[name=username]')
    var password=$('[name=password]')
    var email=$('[name=email]')
    var phone=$('[name=phone]')
    $.get('http://106.12.27.89/msg',{id:1}).done(function(result){
        username.val(result.username)
        password.val(result.password)
        email.val(result.email)
        phone.val(result.phone)
        $('[value="'+result.sex+'"]').prop('checked',true)
        $.map(result.hobby,function(value){
            $('[value="'+value+'"]').prop('checked',true)
        })
    })
    function save(){
        var data={
            username:username.val(),
            password:password.val(),
            email:email.val(),
            phone:phone.val(),
            sex:$('[name=sex]:checked').val(),
            "hobby":[]
        }
        $('input:checkbox:checked').val(function(index,value){
            data.hobby.push(value);
        })
        console.log(data);
        $.post('http://106.12.27.89:8088/msg',{
            newMsg:JSON.stringify(data)
        }).done(function(result){
            console.log(result);
        })
    }
</script>
</html>